<template>
    <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import treeUtil from '@/utils/tree.js'
import http from '@/http.js'

const emit = defineEmits(['select'])

const data = ref([])
const defaultProps = reactive({
    children: 'children',
    label: 'label'
})

const handleNodeClick = (data) => {
    emit('select', data)
}

const loadData = () => {
    http.fetchForm({
        url: '/bas/department/queryTreeList',
        method: 'get',
        data: {
            pId: ''
        }
    }).then((res) => {
        data.value = treeUtil.generateDepartmentTreeData('', res.data)
    })
}

onMounted(() => {
    loadData()
})
</script>
<style scoped>
:deep(.el-tree-node__content) {
    height: 30px;
}

:deep(.el-tree-node__label) {
    font-size: 12px;
}
</style>
